<template>
  <div>
    <div class="main">
      <span style="margin-left: 50%">协议主体</span>
      <div>
        <el-row>
          <el-col :span="12">
            <el-form
              :label-position="labelPosition"
              label-width="80px"
              size="mini"
              :model="formLabelAlign"
            >
              <el-form-item label="协议客户">
                <el-input v-model="formLabelAlign.name" size="mini" />
              </el-form-item>
              <el-form-item label="购进指标">
                <el-input v-model="formLabelAlign.region" size="mini" />
              </el-form-item>
              <el-form-item label="销售区域">
                <el-input v-model="formLabelAlign.type" size="mini" />
              </el-form-item>
              <el-form-item label="购进渠道">
                <el-input v-model="formLabelAlign.type" size="mini" />
              </el-form-item>
            </el-form>
            <div class="grid-content bg-purple" />
          </el-col>
          <el-col :span="10">
            <el-form
              :label-position="labelPosition"
              label-width="80px"
              size="mini"
              :model="formLabelAlign"
            >
              <el-form-item label="协议客户">
                <el-input v-model="formLabelAlign.name" size="mini" />
              </el-form-item>
              <el-form-item label="购进指标">
                <el-input v-model="formLabelAlign.region" size="mini" />
              </el-form-item>
              <el-form-item label="销售区域">
                <el-input v-model="formLabelAlign.type" size="mini" />
              </el-form-item>
              <el-form-item label="购进渠道">
                <el-input v-model="formLabelAlign.type" size="mini" />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-table
          size="mini"
          :data="tableData"
          style="width: 100%; height: auto"
        >
          <el-table-column prop="date" label="指定渠道编码" width="180" />
          <el-table-column prop="name" label="指定渠道名称" width="180" />
          <el-table-column prop="address" label="所在省" />
        </el-table>
      </div>
    </div>
    <div class="product">
      <el-button type="primary" size="mini"> 添加产品 </el-button>
      <span style="margin-left: 44%">产品政策</span>
      <el-table size="mini" :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
      </el-table>
      <el-table size="mini" :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <el-input v-model="input" size="mini" placeholder="请输入内容" />
        </el-table-column>
      </el-table>
    </div>
    <div class="else">
      <span style="margin-left: 50%">补充协议</span>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="补充协议1" name="first">
          补充协议:
          <el-input
            v-model="input"
            size="mini"
            placeholder=""
            type="textarea"
          />
        </el-tab-pane>
        <el-tab-pane label="补充协议2" name="second"> 补充协议2 </el-tab-pane>
        <el-tab-pane label="补充协议3" name="third"> 补充协议3 </el-tab-pane>
      </el-tabs>
      <div style="margin-top: 51px">
        <el-button type="primary"> 保存 </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      input: "",
      activeName: "first",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 200px;
  // background-color: pink;
}
.product {
  width: 100%;
  height: 200px;
  margin-top: 100px;
}
.else {
  width: 100%;
  height: 200px;
}
</style>
